<template>
  <uv-popup ref="popup" mode='bottom' safeAreaInsetBottom bgColor='#FFF' round='40rpx'>
    <view class="share">
      <view class="share-title">分享</view>
      <view class="list">
        <scroll-view scroll-x="true" class="scroll-view_H">
          <template v-for="(item,index) in tabList" :key="index">
            <view class="item" v-if="props.show.includes(item.id)" @click="operate(item)">
              <view class="icon">
                <image :src="`../../static/${item.img}.png`" class="img"></image>
              </view>
              <view class="name">{{ item.name }}</view>
            </view>
          </template>
        </scroll-view>
      </view>
      <uv-line hairline></uv-line>
      <view class="foot" @click="close">取消</view>
    </view>
  </uv-popup>
</template>

<script setup>
import { ref } from 'vue';

const emit = defineEmits(['click']);
const popup = ref(null);
const props = defineProps({
  show: {
    type: Array,
    default: () => [1,2,3,4,5,6]
  }
})

const tabList = ref([
  { name: '微信好友', img: 'wx-icon', id: 1, share: 'weixin' },
  { name: '朋友圈', img: 'friend-icon', id: 2, share: 'weixin' },
  { name: 'QQ', img: 'qq-icon', id: 3, share: 'qq' },
  { name: 'QQ空间', img: 'space-icon', id: 4, share: 'qq' },
  { name: '微博', img: 'weibo-icon', id: 5, share: 'sinaweibo' },
  { name: '链接', img: 'url-icon', id: 6, share: 'URL' },
])

function operate(row){
  emit('click', row);
}
function open(){
  popup.value.open();
}
function close(){
  popup.value.close();
}

defineExpose({
  open,
  close
})
</script>

<style lang="scss" scoped>
  .share{
    &-title{
      font-weight: 500;
      font-size: 36rpx;
      color: #2B2B2B;
      padding: 40rpx 0;
      text-align: center;
    }
    .foot{
      height: 90rpx;
      width: 100%;
      line-height: 90rpx;
      font-weight: 400;
      font-size: 32rpx;
      color: #2B2B2B;
      text-align: center;
    }
    .list{
      padding: 0 30rpx;
      padding-bottom: 50rpx;
      width: 100%;
      .scroll-view_H{
        white-space: nowrap;
        width: 100%;
      }
      .item{
        width: 140rpx;
        display: inline-block;
        .icon{
          width: 90rpx;
          height: 90rpx;
          font-size: 0;
          margin: 0 auto;
        }
        .name{
          font-weight: 400;
          font-size: 24rpx;
          color: #737373;
          padding-top: 16rpx;
          text-align: center;
        }
      }
    }
  }
</style>